<template>
  <div>
    <!-- v-model可以双向绑定数据 视图变化，数据也会跟着变化 -->
    <!-- v-model会忽略掉一些默认的自带属性比如：value，change -->
    <!-- <input type="text" v-model="msg" /> -->

    <form @submit.prevent="login">
      <input type="text" name="username" v-model.number="form.username" />

      <input type="text" name="password" v-model.trim="form.password" />

      <button>提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '2022年第一场雪',
      form: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    login() {
      console.log(this.form.username)
      console.log(this.form.password)
    },
  },
}
</script>

<style scoped></style>
